﻿@page "/catalog"
@inherits EShopBasePage

<PageTitle>Catalog</PageTitle>

<MRow>
    <MCol Xs="5" Sm="3" Md="2">
        <MSelect Label="Brand"
                 @bind-Value="_catalogOptinsModel.Brand"
                 Dense
                 Outlined
                 Items="@_brands"
                 ItemText="b=> b.Brand"
                 ItemValue="b => b.Id">
        </MSelect>
    </MCol>
    <MCol Xs="5" Sm="3" Md="2">
        <MSelect Label="Type"
                 @bind-Value="_catalogOptinsModel.Type"
                 Dense
                 Outlined
                 Items="@_types"
                 ItemText="u => u.Type"
                 ItemValue="u => u.Id">
        </MSelect>
    </MCol>
    <MCol Xs="5" Sm="3" Md="2">
        <MButton Class="ma-2"
                 Color="indigo"
                 Dark
                 OnClick="LoadItemsAsync">
            <MIcon Dark>mdi-chevron-right</MIcon>
        </MButton>
    </MCol>
</MRow>

<MContainer>
    @if (_catalogViewModel.Count > 0)
    {
        <MPagination Length="_catalogViewModel.PageCount" Value="_catalogViewModel.PageIndex" ValueChanged="(v)=>OnPageIndexChangedAsync(v)" @bind-TotalVisible="_catalogViewModel.PageSize"></MPagination>
        <MRow>
            @foreach (var item in _catalogViewModel.Items)
            {
                <MCol Md="4" style="display:flex;flex-flow: column;align-items:center;">
            @*        <MImage MaxHeight="150"
                    MaxWidth="250"
                    Src="https://picsum.photos/id/11/500/300">
                    </MImage>*@
                    @*todo 改为MImage*@
                    <img src="https://picsum.photos/id/11/500/300" height="200" width="300" />
                    <MButton Tile Color="success" class="mt-1" OnClick="(e)=>AddToCart(item)" Disabled="@(!_isAuthenticated)">
                        <MIcon Left>mdi-cart</MIcon>
                        ADD TO CART
                    </MButton>
                    <div>
                        <span>@item.Name</span>
                    </div>
                    <div>
                        <span><span> $ </span> @item.Price</span>
                    </div>
                </MCol>
            }
        </MRow>
        <MPagination Length="_catalogViewModel.PageCount" Value="_catalogViewModel.PageIndex" ValueChanged="(v)=>OnPageIndexChangedAsync(v)" @bind-TotalVisible="_catalogViewModel.PageSize"></MPagination>
    }
    else
    {
        <h2>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</h2>
    }
</MContainer>